<!-- 
	Create by 吃小笼包吗 on 2021-10-08
	二级联动菜单 + sticky
	version: 0.6.0
	注：bug未知，开发中...
 -->
<template>
	<view class="box flex">
		
		<!-- 标题 在线点单-->
		<view class="nav-bar-view flex center" :style="'opacity: ' + (1 - headOpacity)">
			
		</view>
		
		<!-- 标题、滚动到头部后 动态效果 -->
		<view class="nav-bar-opt-view flex row aCenter" :style="'opacity: ' + headOpacity">
			<image class="opt-vip-icon" src="../../static/vip_user.png" @click="goUser()"></image>
			<view class="opt-search-inner flex row aCenter" :style="'flex: '+ searchFlex +'; opacity: '+ searchOpacity" @click="goSearch()">
				<text class="u-search-text flex-1">搜索</text>
				<image class="u-search-icon" src="../../static/search.png"></image>
			</view>
		</view>
		
		<!-- 商品列表 -->
		<!-- 商品列表 -->
		<!-- 商品列表 -->
		<view class="flex-1 overflow-hidden">
			<!-- 整体滚动 -->
			<scroll-view class="right-box screen-all" scroll-y :scroll-top="scrollRightTop" :scroll-with-animation="false" @scroll="rightScroll">
				<view class="head-view">
					<!-- head 大背景 -->
					<image class="head-icon" src="../../static/home_bg.png" mode="aspectFill"></image>
					<!-- 底下的搜索框 -->
					<view class="u-search-inner flex row aCenter" :style="'opacity: ' + (1 - headOpacity)" @click="goSearch()">
						<text class="u-search-text flex-1">搜索</text>
						<image class="u-search-icon" src="../../static/search.png"></image>
					</view>
					<!-- 会员中心的按钮 -->
					<image class="vip-icon" src="../../static/vip_user.png" @click="goUser()"></image>
				</view>
				<view class="flex row">
					<view class="left-view sticky-box overflow-hidden">
						<!-- 一级分类 -->
						<scroll-view class="screen-all menu-scroll-view" scroll-y scroll-with-animation :scroll-top="scrollTop"
							:scroll-into-view="itemId">
							<view class="left-item" v-for="(item,index) in dataList" :key="'left'+index" 
								:class="[current == index ? 'u-tab-item-active' : '']"
								@click.stop="swichMenu(index)">
								<view :class="[current == index ? 'u-tab-item-active-bg':'']"></view>
								<text class="left-item-text">{{item.name}}</text>
							</view>
						</scroll-view>
					</view>
					<view class="right-view flex flex-1">
						<!-- 一级分类 绑定在左侧菜单上 -->
						<view class="right-item" v-for="(item,index) in dataList" :key="'right'+index" :id="'item' + index">
							<!-- 一级分类名称 -->
							<!-- <view class="title-sticky-view flex row aCenter">{{item.name}}</view> -->
							<!-- 二级分类 -->
							<view class="right-sub-item" v-for="(item_sub,index_sub) in item.category_list" :key="'sub'+index_sub">
								<!-- 二级分类名称 item-title-->
								<view class="title-sticky-view flex row aCenter">{{item_sub.name}}</view>
								<!-- 商品列表 -->
								<view class="right-goods-item flex row" v-for="(item_goods,index_goods) in item_sub.goods" :key="'goods'+index_goods" 
									@click.stop="showGoodsInfo(item_goods)">
									<image class="item-menu-image" :src="item_goods.goods_image" mode=""></image>
									<view class="item-right-box flex-1">
										<text class="right-title-text">{{item_goods.goods_name}}</text>
										<text class="right-price">¥{{item_goods.shop_price}}</text>
										<view class="number-view flex row">
											
											<!-- 数量编辑 -->
											
											<!-- 规格为空 并且数量大于0 显示步进器 -->
											<view v-if="(!(item_goods.goods_spec && item_goods.goods_spec.length > 0) && item_goods.num)" class="number-s-view flex row aCenter" @click.stop="">
												<view class="number-left flex center" @click.stop="updataGoodsNum({
																							type: 'reduce',
																							id: item_goods.id,
																							eventId: 'goods'+item_goods.id,
																							event: $event,
																							num: item_goods.num,
																							goods_image: item_goods.goods_image,
																						}, item_goods)">
													<image class="number-icon" src="../../static/jian_w.png"></image>
												</view>
												<input type="number" class="input-number" v-model="item_goods.num" disabled="false"/>
												<view class="number-right flex center" @click.stop="updataGoodsNum({
																							type: 'add',
																							id: item_goods.id,
																							eventId: 'goods'+item_goods.id,
																							event: $event,
																							num: item_goods.num,
																							goods_image: item_goods.goods_image,
																						}, item_goods)">
													<image class="number-icon" src="../../static/add_w.png"></image>
												</view>
											</view>
											
											<!-- 规格不为空，表示有规格，显示选择规格的按钮，隐藏+号按钮 -->
											<view v-if="(item_goods.goods_spec && item_goods.goods_spec.length > 0)" 
												class="number-gg-view flex row center" @click.stop="openSpecs(item_goods)">
												<view v-if="(item_goods.num)" class="number-gg-view-round flex center">{{item_goods.num}}</view>
												<text class="number-gg-view-title">选规格</text>
											</view>
											
											<!-- 规格为空，并且数量==0 -->
											<view class="tjj_yi" @click.stop="updataGoodsNum({
														type: 'add',
														id: item_goods.id,
														eventId: 'goods'+item_goods.id,
														event: $event,
														num: item_goods.num,
														goods_image: item_goods.goods_image,
													}, item_goods)">
												<image v-if="!(item_goods.num) && !(item_goods.goods_spec && item_goods.goods_spec.length > 0)"
													class="right-add-icon" src="../../static/add_round.png" ></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 加上一个底部的，给绝对定位留出空间 -->
				<view class="bottom-view scroll-bottom"></view>
			</scroll-view>
		</view>
		
		<!-- 底部酒筐 - 为保证滚动正确性、使用绝对定位 -->
		<!-- 底部酒筐 - 为保证滚动正确性、使用绝对定位 -->
		<!-- 底部酒筐 - 为保证滚动正确性、使用绝对定位 -->
		<view class="bottom-view bottom-fixed flex row aCenter">
			<view v-if="invite_code" class="cart-view flex center" @click.stop="openCartList()">
				<image id="cart" class="cart-icon" src="../../static/goods_test1.png" mode="aspectFit"></image>
				<view class="cart-number flex center">{{total_cart_num}}</view>
			</view>
			<text v-if="invite_code" class="bottom-price">¥ {{total_money}}</text>
			<view v-if="invite_code" class="flex-1"></view>
			<view v-if="invite_code" class="bottom-btn flex center" @click.stop="onSubmit">去结算</view>
			
			<text v-if="!invite_code" class="xs-text">线上菜单仅供浏览，请前往店内扫码点单。</text>
		</view>
		
		<!-- 购物车添加小球 -->
		<flyInCart ref="inCart" :cartBasketRect="cartBasketRect"></flyInCart>
		
		<!-- pop 商品详情展示 -->
		<uni-popup ref="popupInfo" type="bottom">
			<view class="popup-view flex">
				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item, index) in [activeGoodsInfo.goods_image]" :key="'swiper'+index">
						<view class="swiper-item flex center">
							<image class="swiper-icon ppds" mode="aspectFit " :src="item"></image>
						</view>
					</swiper-item>
				</swiper>
				
				<text class="swiper-title">{{ activeGoodsInfo.goods_name }}</text>
				<text class="swiper-price">¥{{ activeGoodsInfo.shop_price }}</text>
				
				<view class="info-view-package flex" v-if="packageGoods.length > 0">
					<text style="font-size: 28rpx; color: #000000;font-weight: bold;">套餐详情：</text>
					<view class="flex row aCenter" style="padding-top: 7rpx;" v-for="(ppitem, ppindex) in packageGoods" :key="'pp' + ppindex">
						<text class="flex-1" style="font-size: 26rpx; color: #181818;">{{ppitem.name}}</text>
						<text style="font-size: 26rpx; color: #181818;">(x{{ppitem.num}})</text>
						<text style="font-size: 26rpx; color: #181818; width: 150rpx;text-align: right;">¥{{ppitem.shop_price}}</text>
					</view>
				</view>
				
				<view class="goods-info-marbtm"></view>
			</view>
		</uni-popup>
		
		<!-- pop 规格选择 -->
		<!-- pop 规格选择 -->
		<!-- pop 规格选择 -->
		<uni-popup ref="popupSpecs" type="bottom">
			<view class="popup-view flex">
				<view class="specs-title-view flex center">
					<text class="specs-title-view-title">请选择规格</text>
				</view>
				<view class="specs-goodsname-view flex row aCenter">
					<image class="specs-goodsname-icon" :src="currentItem.goods_image"></image>
					<text class="specs-goodsname">{{ currentItem.goods_name }}</text>
				</view>
				<text class="specs-title-view-title specs-title-mar">请选择规格</text>
				<!-- 规格列表 -->
				<view class="specs-view flex row wrap">
					<view 
						v-for="(item,index) in currentSpecsList" :key="'specs' + index"
						:class="[item.active ? 'specs-item-active': 'specs-item','flex center']"
						@click.stop="setSpecs(item)"
					>
						<text :class="[item.active ? 'specs-title-active': 'specs-title']">{{item.name}}</text>
					</view>
				</view>
				<!-- 操作按钮 增删商品 -->
				<view class="edit-spces-bom flex row aCenter">
					<view class="number-view flex row aCenter">
						
						<!-- =========================== 数量编辑 规格 =========================== -->
						<!-- =========================== 数量编辑 规格 =========================== -->
						<!-- =========================== 数量编辑 规格 =========================== -->
						<view class="number-s-view flex row aCenter" @click.stop="">
							<view class="number-left flex center" @click.stop="updataGoodsNum({
																		type: 'reduce',
																		id: currentItem.id,
																		eventId: 'curr'+currentItem.id,
																		event: $event,
																		num: currentItem.num,
																		goods_image: currentItem.goods_image,
																		spec_num: specItem.num,
																		spec_name: specItem.name,
																	}, currentItem, specItem)">
								<image class="number-icon" src="../../static/jian_w.png"></image>
							</view>
							<input type="number" class="input-number" v-model="specItem.num" disabled="false"/>
							<view class="number-right flex center" @click.stop="updataGoodsNum({
																		type: 'add',
																		id: currentItem.id,
																		eventId: 'curr'+currentItem.id,
																		event: $event,
																		num: currentItem.num,
																		goods_image: currentItem.goods_image,
																		spec_num: specItem.num,
																		spec_name: specItem.name,
																	}, currentItem, specItem)">
								<image class="number-icon" src="../../static/add_w.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- pop 购物车列表 -->
		<uni-popup ref="popupCart" type="bottom">
			<view class="popup-view flex">
				<view class="cart-pop-view flex row aCenter">
					<text>我的餐车({{total_cart_num}})</text>
					<view class="flex-1 flex row aCenter jEnd" @click.stop="cleanCart()">
						<image class="delete-icon" src="../../static/delete.png" mode="aspectFit"></image>
						<text class="delete-text">清空餐车</text>
					</view>
				</view>
				<!-- 购物车列表 -->
				<scroll-view class="cart-content-sv" scroll-y>
					<view class="cart-content flex">
						<view class="cart-item flex row aCenter" v-for="(item, index) in cartList" :key="'cartgoods'+index">
							<image class="cart-item-icon" :src="'https://rabbit.jiujingwulian.com'+item.goods_image" mode="aspectFill"></image>
							<view class="cart-item-right flex-1 flex">
								<text class="cart-item-title">{{item.goods_name}}</text>
								<text class="cart-item-price">￥{{item.goods_price}}</text>
								<view class="cart-btm flex row">
									<text v-if="!item.spec_name" class="cart-spec-title"></text>
									<text v-if="item.spec_name" class="cart-spec-title">规格:【{{ item.spec_name }}】</text>
									<view class="cart-number-view flex row aCenter" @click.stop="">
										<view class="cart-number-left flex center" @click.stop="updataGoodsNumForCart({
																							type: 'reduce',
																							id: item.goods_id,
																							eventId: 'cart'+ item.num +item.goods_id,
																							event: $event,
																							num: item.num,
																							spec_num: item.num,
																							spec_name: item.spec_name,
																							goods_image: item.goods_image,
																						}, item)">
											<image class="cart-number-icon" src="../../static/jian_b.png"></image>
										</view>
										<input type="number" class="cart-input-number" v-model="item.num" disabled="false"/>
										<view class="cart-number-right flex center" @click.stop="updataGoodsNumForCart({
																							type: 'add',
																							id: item.goods_id,
																							eventId: 'cart'+ item.num +item.goods_id,
																							event: $event,
																							num: item.num,
																							spec_num: item.num,
																							spec_name: item.spec_name,
																							goods_image: item.goods_image,
																						}, item)">
											<image class="cart-number-icon" src="../../static/add_b.png"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				
				<!-- pop 底部操作栏 -->
				<!-- pop 底部操作栏 -->
				<!-- pop 底部操作栏 -->
				<!-- 注意 注意 注意 注意 注意 注意 注意 上面还有一个这个组件 列表最底部的数据 -->
				<view class="pop-bottom-view flex row aCenter">
					<view class="cart-view flex center" @click.stop="openCartList()">
						<image class="cart-icon" src="../../static/goods_test1.png" mode="aspectFit"></image>
						<view class="cart-number flex center">{{total_cart_num}}</view>
					</view>
					<text class="bottom-price">¥ {{total_money}}</text>
					<view class="flex-1"></view>
					<view class="bottom-btn flex center" @click.stop="onSubmit">去结算</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import flyInCart from '@/components/flyInCart/flyInCart.vue';
	import XUtil from '../../common/xlb-util.js';
	import handle from './handle.js';
	
	export default {
		data() {
			return {
				//测试保留数据
				testList: [
					{ name: "菜单1",  }
				],
				
				//所有二级菜单的操作数据
				dataList: [], //总数据列表
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0,
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				itemId: '', // 栏目右边scroll-view用于滚动的id
				menuItemPos: [],
				arr: [],
				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
				timer: null, // 定时器
				
				//头部数据
				headHeight: 0, //头部header的高度
				headOpacity: 0,
				searchFlex: 0.3,
				searchOpacity: 0.3,
				
				//餐车部分数据
				cartList: [], //餐车列表
				total_money: 0,
				total_cart_num: 0,
				
				//加入餐车动效数据
				cartBasketRect:{}, //购物车位置数据
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				
				invite_code: '',
				isFrist: true,
				
				//规格编辑数据
				currentItem: {},       // 选规格的 主商品信息
				currentSpecsList: [],  // 当前商品的规格列表
				specItem: {},          // 当前选择的 规则选项item
				
				activeGoodsInfo: {}, //当前选中查看详情的数据
				packageGoods: [],
				
				onSubmit: ()=>{}, //去结算点击事件
			}
		},
		onLoad() {
			//增加防抖
			this.onSubmit = XUtil.debounce(this.goSubmit, 256, true);
			// uni.setStorageSync("invite_code", "");
			this.invite_code = uni.getStorageSync("invite_code");
			console.log("新首页");
			
			// 初始化数据列表 - 移植到onShow方法里
			// this.getList();
			// this.getCartList();
			
			//测试，直接绑定桌位号
			// this.bindInviteCode();
		},
		onReady() {
			const self = this;
			let query = uni.createSelectorQuery();
			//获取购物车位置
			setTimeout(() => {
				query.select('#cart').boundingClientRect(data => {
					self.cartBasketRect = data;
					console.log('cartBasketRect', data);
				}).exec();
			}, 10);
			
			setTimeout(() => {
				query.select('.head-view').fields({
					size: true
				}, res => {
					// 节点尚未生成 - 留备处理
					if (!res) { return; }
					self.headHeight = res.height;
					console.log('res.height=', res.height);
				}).exec();
			}, 10);
		},
		onShow() {
			console.log('onShow');
			
			this.isFrist = true;
			uni.showToast({ title: "加载中...", icon: 'loading', mask: true, duration: 10000 });
			
			//把 获取购物车数量 和 更新数据列表 放在这里
			this.getList();
			this.getCartList();
		},
		methods: {
			//测试代码区域
			bindInviteCode () {
				let params = {
					token: uni.getStorageSync("token"),
					invite_code: 'dqbmw2',
				}
				console.log(params);
				this.$request("api/user/ceshi", params)
					.then(({ code, msg, data, time }) => {
						console.log('测试绑定桌位号=', code, msg, data);
						if(code == 1){
							
						}else{}
					}).catch((e) => {
						console.log(e);
					});
			},
			
			// 代码分区
			// ================== 初始化接口数据 商品列表&购物车列表 ==================
			// ================== 初始化接口数据 商品列表&购物车列表 ==================
			// ================== 初始化接口数据 商品列表&购物车列表 ==================
			/**
			 * 获取全部列表数据 初始化
			 */
			getList () {
				let params = {
					token: uni.getStorageSync("token"),
					id: 0,
				}
				console.log(params);
				this.$request("api/index/goods_list", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						this.isFrist = false;
						uni.hideToast();
						if(code == 1){
							// this.dataList = data.category;
							this.dataList = handle.initData(data.category);
							// this.specItem = handle.getActiveSpec(data.category);
							
							this.cartUpdataListNum();
						}else{}
					}).catch((e) => {
						this.isFrist = false;
						uni.hideToast();
						console.log(e);
					});
			},
			/**
			 * 获取餐车列表
			 */
			getCartList () {
				let params = {
					token: uni.getStorageSync("token"),
				}
				this.$request("api/Cart/cart_list", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(!this.isFrist){
							uni.hideToast();
						}
						if(code == 1){
							this.cartList = data.data;
							// this.total_money = data.total_money;
							if(data.total_money && parseFloat(data.total_money) > 0){
								this.total_money = data.total_money.toFixed(2);
							}else{
								this.total_money =  0;
							}
							
							// total_cart_num
							let _total_cart_num = 0;
							this.cartList.map((item, index)=>{
								_total_cart_num += parseInt(item.num);
							});
							this.total_cart_num = _total_cart_num;
							
							this.cartUpdataListNum();
						}else{
							
						}
					}).catch((e) => {
						uni.hideToast();
						console.log(e);
					});
			},
			
			/**
			 * 根据餐车列表更新商品列表 减少网络请求
			 * 根据购物车数量，同步商品列表数量
			 */
			cartUpdataListNum () {
				let _list = this.dataList;
				let _cartList = this.cartList;
				
				if(_list && _list.length > 0){
					console.log("根据购物车更新数据=", _list, _cartList);
					_list.map((item, index)=>{
						item.category_list.map((categoryItem, categoryIndex)=>{
							categoryItem.goods.map((goodsItem, goodsIndex)=>{
								//先把数据清零
								goodsItem.num = 0;
								//有规格的规格也清零
								if(goodsItem.goods_spec && goodsItem.goods_spec.length > 0){
									goodsItem.goods_spec.map((specItem, specIndex)=>{
										specItem.num = 0;
									});
								}
								//然后遍历购物车进行数据同步
								_cartList.map((classItem, classIndex)=>{
									if(classItem.goods_id == goodsItem.id){
										if(classItem.spec_name){
											//有规格
											goodsItem.goods_spec.map((specItem, specIndex)=>{
												if(specItem.name == classItem.spec_name){
													specItem.num = classItem.num;
													goodsItem.num += classItem.num;
												}
											});
										}else{
											//无规格
											goodsItem.num = classItem.num;
										}
									}
								});
							})
						});
					});
					// this.$set(this.dataList);
				}else{
					console.log('数据列表为空，不用更新，只需要把商品列表数量全部归零');
				}
			},
			
			
			// ================== 增删选择商品到购物车 和 购物车相关操作 ==================
			// ================== 增删选择商品到购物车 和 购物车相关操作 ==================
			// ================== 增删选择商品到购物车 和 购物车相关操作 ==================
			// 根据餐车的数据，处理
			// 清空购物车
			cleanCart () {
				let that = this;
				uni.showModal({
					title: "清空购物车提醒",
					content: "清空后无法恢复，是否全部清除？",
					confirmText: "清空",
					success:  function (res) {
						if (res.confirm) {
							//清空酒 api/cart/del_cart
							let params = {
								token: uni.getStorageSync("token"),
							}
							that.$request("api/cart/del_cart", params)
								.then(({ code, msg, data, time }) => {
									console.log(code, msg, data);
									uni.showToast({
										title: msg,icon:"none"
									})
									that.getList();
									that.getCartList();
									that.$refs.popupCart.hide();
									if(code == 1){
										
									}else{
										
									}
								}).catch((e) => {
									console.log(e);
								});
						} else if (res.cancel) {
							
						}
					}
				})
			},
			//去结算
			goSubmit () {
				// uni.showLoading({ title: "结算中...", mask: true });
				uni.showToast({ title: "结算中...", icon: 'loading', mask: true, duration: 10000 });
				//先执行接口方法
				let ids = [];
				this.cartList.map((item, index) => {
					ids.push(item.id);
				});
				let params = {
					token: uni.getStorageSync("token"),
					cart_id: ids.join(','),
				}
				console.log(params);
				//结算订单
				this.$request("api/order/cart_settle", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						uni.hideToast();
						uni.showToast({ title: msg, icon: 'none' });
						if(code == 1){
							uni.navigateTo({
								url: "../confirm-order/confirm-order?order=" + JSON.stringify(data) + "&cartIds=" + params.cart_id,
							})
						}else{
							
						}
					}).catch((e) => {
						uni.hideToast();
						console.log(e);
					});
				
				//前往结算页面
				// uni.navigateTo({
				// 	url: "../confirm-order/confirm-order?cartIds=" + ids.join(','),
				// })
			},
			
			// ========================================== 添加商品到餐车 ==========================================
			// ========================================== 添加商品到餐车 ==========================================
			// ========================================== 添加商品到餐车 ==========================================
			
			// 购物车编辑商品数量
			updataGoodsNumForCart (opt, item) {
				if(!this.invite_code){
					// console.log("没有桌位号，不可以操作数量");
					uni.showToast({
						title: '线上菜单仅供浏览',
						icon: 'none',
					})
					return;
				}
				let {
					type,        // 类型  add=添加 reduce=减少
					id,          // id 商品的id
					event,       // 增加商品必传，当前组件的上下文 $event
					num = 0,         // 商品数量
					spec_num = 0,    // 商品规格数量
					spec_name = "",   // 商品规格名称
					goods_image = "", // 商品图片
				} = {...opt};
				
				if(type == 'add'){
					if(spec_name){
						opt.spec_num = opt.spec_num + 1;
						item.num = opt.spec_num;
					}else{
						opt.num = opt.num + 1;
						item.num = opt.num;
					}
					// this.$set(this.dataList);
					this._goodsNumAdd(opt);
				}else if(type == 'reduce'){
					if(spec_name){
						opt.spec_num = opt.spec_num > 1 ? opt.spec_num - 1 : 0;
						item.num = opt.spec_num;
					}else{
						opt.num = opt.num > 1 ? opt.num - 1 : 0;
						item.num = opt.num;
					}
					// this.$set(this.dataList);
					this._goodsReduce(opt);
				}else{
					console.log('updataGoodsNumForCart 方法，type 参数错误！type=', type);
				}
			},
			
			
			// 更新商品数量
			updataGoodsNum (opt, item, specItem) {
				if(!this.invite_code){
					// console.log("没有桌位号，不可以操作数量");
					uni.showToast({
						title: '线上菜单仅供浏览',
						icon: 'none',
					})
					return;
				}
				let {
					type,        // 类型  add=添加 reduce=减少
					id,          // id 商品的id
					event,       // 增加商品必传，当前组件的上下文 $event
					num = 0,         // 商品数量
					goods_image = "", // 商品图片
					spec_num = 0,    // 商品规格数量
					spec_name = "",   // 商品规格名称
				} = {...opt};
				
				console.log('数量更新 opt=', opt);
				
				if(type == 'add'){
					if(spec_name){
						opt.spec_num = opt.spec_num + 1;
						specItem.num = opt.spec_num;
					}else{
						opt.num = opt.num + 1;
						item.num = opt.num;
					}
					this.$set(this.dataList);
					this._goodsNumAdd({...opt});
				}else if(type == 'reduce'){
					if(spec_name){
						opt.spec_num = opt.spec_num > 1 ? opt.spec_num - 1 : 0;
						specItem.num = opt.spec_num;
					}else{
						opt.num = opt.num > 1 ? opt.num - 1 : 0;
						item.num = opt.num;
					}
					this.$set(this.dataList);
					this._goodsReduce(opt);
				}else{
					console.log('updataGoodsNum 方法，type 参数错误！type=', type);
				}
			},
			//内部 添加商品
			_goodsNumAdd (opt) {
				//如果是添加商品，显示动画。
				if(opt.event){
					if(opt.goods_image.indexOf('http') != -1){
						this.addToCart(opt.event, opt.eventId, opt.goods_image);
					}else{
						this.addToCart(opt.event, opt.eventId, 'https://rabbit.jiujingwulian.com' + opt.goods_image);
					}
				}
				this._numberUpdata(opt);
			},
			//内部 减少商品
			_goodsReduce (opt) {
				this._numberUpdata(opt);
			},
			
			//调用数据更新
			_numberUpdata (opt) {
				let that = this;
				// 去重
				this._numberTime && clearTimeout(this._numberTime);
				this._numberTime = setTimeout(() => {
					that.updataCartNumber(opt);
				}, 521);
			},
			
			/**
			 * 购物车商品数量操作 接口
			 */
			updataCartNumber (opt) {
				let {
					type,        // 类型  add=添加 reduce=减少
					id = 0,          // id 商品的id
					event,       // 增加商品必传，当前组件的上下文 $event
					num = 0,         // 商品数量
					spec_num = 0,    // 商品规格数量
					spec_name = "",   // 商品规格名称
				} = {...opt};
				
				uni.showToast({ title: "请稍后...", icon: 'loading', mask: true, duration: 10000 });
				
				// api/Cart/add_cart 加入购物车
				let params = {
					token: uni.getStorageSync("token"),
					goods_id: id,
					num: spec_name ? spec_num : num, //传入商品数量，传几后台就存几，传0 购物车移除此商品
					spec_name: spec_name, //规格名称
				}
				console.log(params);
				this.$request("api/Cart/add_cart", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							//加入餐车成功，刷新餐车列表
							// uni.hideToast();
							
							// this.getList();
							
							this.getCartList();
						}else{
							uni.hideToast();
							uni.showToast({ title: msg, icon: 'none'});
						}
					}).catch((e) => {
						uni.hideToast();
						console.log(e);
					});
			},
			
			//执行加入餐车动画
			addToCart(e, id, img){
				this.$refs.inCart.addToCart(e, id, img);
			},
			
			showGoodsInfo (item) {
				this.activeGoodsInfo = item;
				console.log(this.activeGoodsInfo);
				
				this.packageGoods = [];
				
				// api/index/package_goods_info
				let params = {
					token: uni.getStorageSync("token"),
					id: item.id,
				}
				console.log(params);
				this.$request("api/index/package_goods_info", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							this.packageGoods = data.package_goods;
						}else{
							uni.showToast({ title: msg, icon: 'none'});
						}
					}).catch((e) => {
						console.log(e);
					});
				
				//展示商品详情
				this.openInfo(item);
			},
			openCartList () {
				//打开餐车列表
				this.openCart();
			},
			/**
			 * 展示商品详情弹窗
			 */
			openInfo(item){
				this.$refs.popupInfo.open('bottom')
			},
			/**
			 * 展示商品 规格 规格选择 弹窗
			 * 当点击带规格的商品弹出选择规格弹窗 并处理相关数据
			 */
			openSpecs(obj){
				console.log( '选中的规格 商品总信息=' ,obj);
				if(obj.goods_spec && obj.goods_spec.length > 0){
					// 当商品存在规格 赋值给当前选中的商品 准备加入餐车的商品
					if(this.currentItem && (obj.id == this.currentItem.id)){
						// 当前选择的和上次选择的一样，不做任何操作，新数据num可以进行修改。
						let _goodsSpec = obj.goods_spec;
						let _specItem = {};
						_goodsSpec.map((item, index)=>{
							if(index === 0){
								item.active = true;
								_specItem = item;
								console.log('初始化 _specItem=', _specItem);
							}else{
								item.active = false;
							}
						});
						// 更新规格选择的数据
						this.updataSpce(obj, _goodsSpec, _specItem);
					}else{
						// 当前选择的和上次选择的不一样，直接重新赋值
						// 默认选中第一个
						let _goodsSpec = obj.goods_spec;
						let _specItem = {};
						_goodsSpec.map((item, index)=>{
							if(index === 0){
								item.active = true;
								_specItem = item;
								console.log('初始化2 _specItem=', _specItem);
							}else{
								item.active = false;
							}
						});
						// 更新规格选择的数据
						this.updataSpce(obj, _goodsSpec, _specItem);
					}
					// 打开弹窗
					this.$refs.popupSpecs.open('bottom')
				}else{
					uni.showToast({
						title: '当前商品没有规格！', icon: 'error'
					})
				}
			},
			
			//更新规格选择的数据
			updataSpce (goods, specList, specItem) {
				this.currentItem = goods;
				this.currentSpecsList = specList;
				this.specItem = specItem;
			},
			
			/**
			 * 规格设置部分逻辑
			 * 选择当前商品的规格
			 */
			setSpecs(obj){
				let _list = [...this.currentSpecsList];
				let _specItem = this.specItem;
				_list.map((item, index)=>{
					if(item.id == obj.id){
						console.log('已经把', item.name, '设置为选中。');
						item.active = true;
						_specItem = item;
					}else{
						item.active = false;
					}
				});
				
				// 渲染选择后的数据
				this.updataSpce(this.currentItem, _list, _specItem);
			},
			
			/**
			 * 展示购物车列表
			 */
			openCart(){
				this.$refs.popupCart.open('bottom')
			},
			
			// ================= 部分跳转链接和回调 =================
			goSearch () {
				uni.navigateTo({
					url: "../role-user/search",
				})
			},
			goUser () {
				uni.navigateTo({
					url: "../role-user/user",
				})
			},
			
			bindChange (e) {
				console.log(e);
			},
			
			//========================= 二级商品菜单 滚动操作 ========================
			//========================= 二级商品菜单 滚动操作 ========================
			//========================= 二级商品菜单 滚动操作 ========================
			/**
			 * 点击左侧栏目
			 * 1. 更改左侧选中状态
			 * 2. 同步滚动右侧商品列表
			 * @param {Object} index
			 */
			async swichMenu(index) {
				console.log('swichMenu=', index);
				//如果选中的左侧菜单为空，则初始化右侧高度
				if(this.arr.length == 0) {
					await this.getMenuItemTop();
				}
				//如果点击了当前选中的 item 则不做任何处理
				if (index == this.current) return;
				this.scrollRightTop = this.oldScrollTop;
				this.$nextTick(function(){
					this.scrollRightTop = this.arr[index];
					this.current = index;
					this.leftMenuStatus(index);
				})
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
						resolve();
					}).exec();
				})
			},
			// 观测元素相交状态
			async observer() {
				this.tabbar.map((val, index) => {
					let observer = uni.createIntersectionObserver(this);
					// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
					// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
					observer.relativeTo('.right-box', {
						top: 0
					}).observe('#item' + index, res => {
						if (res.intersectionRatio > 0) {
							let id = res.id.substring(4);
							this.leftMenuStatus(id);
						}
					})
				})
			},
			// 设置左边菜单的滚动状态
			async leftMenuStatus(index) {
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('left-item', 'menuItemHeight');
				}
				// 将菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 获取右边菜单每个item到顶部的距离
			getMenuItemTop() {
				new Promise(resolve => {
					let selectorQuery = uni.createSelectorQuery();
					selectorQuery.selectAll('.right-item').boundingClientRect((rects) => {
						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
						if(!rects.length) {
							setTimeout(() => {
								this.getMenuItemTop();
							}, 10);
							return ;
						}
						rects.forEach((rect) => {
							// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
							this.arr.push(rect.top - rects[0].top + this.headHeight);
							resolve();
						})
						console.log(this.arr);
					}).exec()
				})
			},
			// 右边菜单滚动
			async rightScroll(e) {
				//新增处理 标题栏渐变 的逻辑
				let scrollTop = e.detail.scrollTop;
				let minHeadHeight = parseInt(this.headHeight / 1.3);
				if(scrollTop <= minHeadHeight){
					this.headOpacity = 0;
					this.searchFlex = 0.3;
					this.searchOpacity = 0.3;
				}else if(scrollTop > minHeadHeight && scrollTop < this.headHeight){
					// console.log(minHeadHeight);
					//差值
					let totalDiff = this.headHeight - minHeadHeight;
					let diff = scrollTop - minHeadHeight;
					// console.log(parseFloat(diff/totalDiff).toFixed(2));
					// 赋值操作
					this.headOpacity = parseFloat(diff/totalDiff).toFixed(2);
					this.searchFlex = parseFloat(diff/totalDiff).toFixed(2) >= 0.3 ? parseFloat(diff/totalDiff).toFixed(2) : 0.3;
					this.searchOpacity = parseFloat(diff/totalDiff).toFixed(2);
				}else if(scrollTop >= this.headHeight){
					this.headOpacity = 1;
					this.searchFlex = 1;
					this.searchOpacity = 1;
				}else{
					this.headOpacity = 0;
					this.searchFlex = 0.3;
					this.searchOpacity = 0.3;
				}
				
				//正常菜单逻辑
				this.oldScrollTop = e.detail.scrollTop;
				if(this.arr.length == 0) {
					await this.getMenuItemTop();
				}
				if(this.timer) return ;
				if(!this.menuHeight) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
				}
				setTimeout(() => { // 节流
					this.timer = null;
					// scrollHeight为右边菜单垂直中点位置
					let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
					for (let i = 0; i < this.arr.length; i++) {
						let height1 = this.arr[i];
						let height2 = this.arr[i + 1];
						// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
						if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
							// console.log(height1, height2, scrollHeight, i)
							//回到第一项数据问题，因增加ui导致 所以加一层判断
							if(scrollHeight < height1){
								this.leftMenuStatus(0);
							}else{
								this.leftMenuStatus(i);
							}
							return ;
						}
					}
				}, 10)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background-color: #010B24;
		position: relative;
	}
	.sticky-box {
		position: sticky;
		top: 0;
		box-shadow: 0 -2rpx #010B24;
	}
	.nav-bar-view {
		width: 100%;
		height: 100rpx;
		background-color: #010B24;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFF;
	}
	
	//第二个改变后的标题栏
	.nav-bar-opt-view {
		width: 100%;
		height: 100rpx;
		background-color: #010B24;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFF;
		justify-content: space-between;
		position: absolute;
		top: 0;
		opacity: 1;
	}
	.opt-vip-icon {
		width: 179rpx;
		height: 67rpx;
	}
	.opt-search-inner {
		flex: 1;
		height: 65rpx;
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		padding: 10rpx 16rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		font-size: 28rpx;
		font-weight: 400;
	}
	
	// head
	.head-view {
		width: 100%;
		height: 576rpx;
		position: relative;
	}
	.head-icon {
		width: 100%;
		height: 576rpx;
	}
	.vip-icon {
		width: 179rpx;
		height: 67rpx;
		position: absolute;
		top: 50rpx;
		left: 0;
		z-index: 9;
	}
	.u-search-inner {
		width: 680rpx;
		height: 65rpx;
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		padding: 10rpx 16rpx;
		margin-left: 35rpx;
		margin-bottom: 10rpx;
		position: absolute;
		bottom: 0;
	}
	.u-search-text {
		font-size: 26rpx;
		color: #666666;
		margin-left: 16rpx;
	}
	.u-search-icon {
		width: 26rpx;
		height: 26rpx;
		margin-top: -1rpx;
		margin-right: 12rpx;
	}
	
	// left
	.left-view {
		width: 200rpx;
		height: calc(100vh);
		/* height: calc(100vh - 300rpx); */
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - 200rpx);
		/* #endif */
	}
	.left-item {
		width: 100%;
		height: 100rpx;
		position: relative;
		background: #010B24;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #D5D8E1;
		font-weight: 400;
		line-height: 1;
	}
	.u-tab-item-active {
		position: relative;
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: 600;
		background: #010B24;
	}
	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4rpx solid #B053FF;
		height: 44rpx;
		left: 0;
		top: 27rpx;
		z-index: 2;
	}
	.u-tab-item-active-bg {
		width: 100%;
		height: 100rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 6;
		background-image: linear-gradient(to right, #F41BD847, #010B24, #010B24);
	}
	.left-item-text {
		position: absolute;
		z-index: 7;
	}
	
	// right
	.right-box {
		
	}
	.right-view {
		position: relative;
		padding: 12rpx 12rpx;
	}
	.right-item {
		
	}
	.right-sub-item {
		
	}
	.item-title {
		font-size: 26rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	.title-sticky-view {
		width: 100%;
		height: 80rpx;
		background-color: #010B24;
		position: sticky;
		// top为0时 闪烁导致视图溢出 改为-1rpx
		top: -1rpx;
		z-index: 10;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFF;
		padding-left: 16rpx;
	}
	.title-sticky-view::before {
		content: "";
		position: absolute;
		border-left: 6rpx solid #B053FF;
		border-radius: 3rpx;
		height: 25rpx;
		left: 0;
		top: 28rpx;
		z-index: 2;
	}
	
	// 商品详情 css start ======
	.right-goods-item {
		padding: 20rpx;
	}
	.item-menu-image {
		width: 202rpx;
		height: 190rpx;
		background-color: #272F45;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.item-right-box {
		height: 100%;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	.right-title-text {
		height: 80rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		margin-top: 10rpx;
		overflow: hidden;
	}
	.right-price {
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
	}
	.number-view {
		width: 100%;
		height: 60rpx;
		justify-content: flex-end;
		align-items: center;
	}
	.number-s-view {
		width: 230rpx;
		height: 50rpx;
		border: 1rpx solid #45516E;
		border-radius: 10rpx;
	}
	.input-number {
		flex: 1;
		font-size: 26rpx;
		color: #FFF;
		text-align: center;
	}
	.number-left {
		width: 70rpx;
		height: 100%;
		border-right: 1rpx solid #45516E;
	}
	.number-right {
		width: 70rpx;
		height: 100%;
		border-left: 1rpx solid #45516E;
	}
	.number-icon {
		width: 30rpx;
		height: 30rpx;
	}
	.right-add-icon {
		width: 39rpx;
		height: 39rpx;
	}
	// 商品 css end ======
	
	//bottom view 购物车
	.bottom-fixed {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 11;
	}
	.bottom-view {
		width: 100%;
		height: 120rpx;
		background-color: #010B24;
		padding: 0 30rpx;
	}
	.cart-view {
		width: 120rpx;
		height: 120rpx;
		position: relative;
	}
	.cart-icon {
		width: 78rpx;
		height: 78rpx;
	}
	.cart-number {
		position: absolute;
		right: 6rpx;
		top: 9rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 18rpx;
		background-color: #E42435;
		font-size: 24rpx;
		line-height: 1;
		text-align: center;
		color: #FFF;
	}
	.bottom-price {
		font-size: 32rpx;
		color: #FFF;
		font-weight: bold;
	}
	.bottom-btn {
		width: 250rpx;
		height: 87rpx;
		background-color: #B053FF;
		border-radius: 45rpx;
		font-size: 32rpx;
		color: #FFF;
	}
	.bottom-btn:active {
		background-color: #B053FFEE;
	}
	
	// ===== popup -- popup -- popup -- popup =====
	.popup-view {
		width: 100%;
		min-height: 300rpx;
		// overflow: auto;
		// -webkit-overflow-scrolling:touch;
		background-color: #FFF;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		position: relative;
	}
	.bottom-view {
		height: 120rpx;
		background-color: #010B24;
		padding: 0 30rpx;
	}
	.pop-bottom-view {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background-color: #010B24;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.cart-view {
		width: 120rpx;
		height: 120rpx;
		position: relative;
	}
	.cart-icon {
		width: 78rpx;
		height: 78rpx;
	}
	.cart-number {
		position: absolute;
		right: 6rpx;
		top: 9rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 18rpx;
		background-color: #E42435;
		font-size: 24rpx;
		line-height: 1;
		text-align: center;
		color: #FFF;
	}
	.bottom-price {
		font-size: 32rpx;
		color: #FFF;
		font-weight: bold;
	}
	.bottom-btn {
		width: 250rpx;
		height: 87rpx;
		background-color: #B053FF;
		border-radius: 45rpx;
		font-size: 32rpx;
		color: #FFF;
	}
	.bottom-btn:active {
		background-color: #B053FFEE;
	}
	.number-gg-view {
		padding: 2rpx 12rpx;
		position: relative;
		border-radius: 20rpx;
		background-color: #FFF;
	}
	.number-gg-view-round {
		position: absolute;
		width: 34rpx;
		height: 34rpx;
		top: -10rpx;
		right: -18rpx;
		border-radius: 20rpx;
		background-color: #FF0000;
		font-size: 24rpx;
		color: #FFF;
	}
	.number-gg-view-title {
		font-size: 24rpx;
		color: #010B24;
	}
	.delete-icon {
		width: 27rpx;
		height: 27rpx;
	}
	.cart-pop-view {
		width: 100%;
		height: 90rpx;
		padding: 0 32rpx;
		position: fixed;
		z-index: 9;
		top: 0;
		background-color: #FFFFFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
	.delete-text {
		font-size: 26rpx;
		color: #7D7D7D;
		margin-left: 12rpx;
	}
	.cart-content {
		margin-top: 90rpx;
		margin-bottom: 120rpx;
	}
	.cart-content-sv {
		min-height: 200rpx;
		max-height: 1000rpx;
	}
	.cart-item {
		width: 100%;
		padding: 26rpx 41rpx;
	}
	.cart-item-right {
		margin-left: 22rpx;
	}
	.cart-item-title {
		height: 60rpx;
		font-size: 28rpx;
		color: #212121;
		line-height: 30rpx;
		overflow: hidden;
	}
	.cart-item-price {
		font-size: 28rpx;
		color: #212121;
		font-weight: bold;
		margin-top: 10rpx;
	}
	.cart-btm {
		justify-content: space-between;
	}
	.cart-spec-title {
		font-size: 24rpx;
		color: #787878;
	}
	.goods-info-marbtm {
		height: 60rpx;
	}
	// .cart-item-title::after {
	// 	content: "【常温】";
	// 	font-size: 28rpx;
	// 	color: #787878;
	// 	font-weight: 400;
	// 	overflow: hidden;
	// }
	.number-cart-box {
		height: 100rpx;
	}
	.cart-item-icon {
		width: 202rpx;
		height: 190rpx;
	}
	.cart-number-view {
		width: 230rpx;
		height: 50rpx;
		border: 1rpx solid #45516E33;
		border-radius: 10rpx;
	}
	.cart-input-number {
		flex: 1;
		font-size: 26rpx;
		color: #121212;
		text-align: center;
	}
	.cart-number-left {
		width: 70rpx;
		height: 100%;
		border-right: 1rpx solid #45516E33;
	}
	.cart-number-right {
		width: 70rpx;
		height: 100%;
		border-left: 1rpx solid #45516E33;
	}
	.cart-number-icon {
		width: 30rpx;
		height: 30rpx;
	}
	.swiper {
		width: 616rpx;
		height: 560rpx;
	    margin: 30rpx auto 0;
	}
	.swiper-title {
		font-size: 30rpx;
		color: #212121;
		font-weight: bold;
		margin-left: 30rpx;
		margin-top: 26rpx;
	}
	.swiper-price {
		font-size: 34rpx;
		color: #E42435;
		font-weight: bold;
		margin-left: 30rpx;
		margin-top: 10rpx;
	}
	.specs-view {
		width: 100%;
		padding: 12rpx 36rpx;
		margin-bottom: 20rpx;
	}
	.specs-item {
		padding: 14rpx 45rpx;
		background-color: #F0F0F0;
		border-radius: 40rpx;
		margin-right: 26rpx;
		margin-bottom: 12rpx;
		height: 100%;
	}
	.specs-title {
		font-size: 26rpx;
		color: #1B1B1B;
	}
	.specs-item-active {
		padding: 14rpx 45rpx;
		background-color: #B053FF;
		border-radius: 40rpx;
		margin-right: 26rpx;
		margin-bottom: 12rpx;
	}
	.specs-title-active {
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.specs-title-view {
		width: 100%;
		height: 80rpx;
	}
	.specs-title-view-title {
		font-size: 28rpx;
		color: #121212;
		font-weight: bold;
	}
	.specs-goodsname-view {
		width: 100%;
		padding: 12rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 12rpx;
	}
	.specs-goodsname {
		flex: 1;
		font-size: 26rpx;
		color: #121212;
		margin-left: 12rpx;
	}
	.specs-goodsname-icon {
		width: 110rpx;
		height: 110rpx;
		border-radius: 16rpx;
		background-color: #F0F0F0;
	}
	.specs-title-mar {
		margin-left: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 12rpx;
	}
	.edit-spces-bom {
		width: 100%;
		height: 120rpx;
		background-color: #010B24;
		padding: 0 36rpx;
	}
	.xs-text {
		font-size: 28rpx;
		color: #FFFFFF99;
	}
	.info-view-package {
		margin: 20rpx 20rpx 0 20rpx;
		background-color: #F7F7F7;
		border-radius: 15rpx;
		padding: 16rpx;
	}
	.ppds{
		height: 560rpx;
	}
	.tjj_yi{
		width: 60rpx; 
		    height: 60rpx;
		    text-align: right;
		    line-height: 60rpx;
	}
</style>
